<template>
  <div class="rating">
    <span class="back">★★★★★</span>
    <span class="mask" :style="style">★★★★★</span>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      color: {
        type: String,
        default: '#ffb436'
      },
      score: {
        type: Number,
        default: 0
      }
    },
    computed: {
      style () {
        return `width:${this.score / 2}em;color:${this.color}`
      }
    }
  }

</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .rating
    position: relative;
    display: inline-block;
    .back
      color #ddd
    .mask
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      width: 0;
</style>
